<template>
  <div id="chart" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '../../components/Charts/mixins/resize'
import loadApi from '@/api/img';
export default {
  name: 'tableChart',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '1000%'
    }
  },
  data(){
    return {

    }
  },
  mounted() {
    this.setChart()
  },
  methods: {
    async setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('chart'))
      var data1 = [
        ['score', 'amount', 'product'],
      ]

      let res = await loadApi.listAll()
      for (var i = 0; i < res.data.length; i++) {
        data1.push([])
        data1[i+1].push(res.data[i].entryname + res.data[i].projectname)
        data1[i+1].unshift(res.data[i].quantities)
        data1[i+1].unshift(Math.random()*100)
        console.log(data1)
        // data2[i].value = res.data[i].quantities
        // data2[i].name = res.data[i].entryname+res.data[i].projectname
        // console.log(data1.length)
      }

      // 指定图表的配置项和数据
      var option = {
        dataset: {
          source: data1
        },
        grid: { containLabel: true },
        xAxis: { name: 'amount' },
        yAxis: { type: 'category' },
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['最高分数', '最低分数'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      };
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
